<template>
    <div id="app">
      <h1>hello Vuex</h1>
      <p>{{$store.state.count}} vs {{count}}</p>
      <p>
         <button @click='$store.commit("jia",{a:10})'>加</button>
         <button @click='jian'>减</button>
      </p>
      <p>
         <button @click='jiaplus'>+plus</button>
         <button @click='jianplus'>-plus</button>
      </p>

    </div>
</template>

<script>
import { mapState,mapMutations,mapGetters,mapActions } from 'vuex'
  export default{
    name:'app',
    data(){
      return {
        //count:0
      }
    },
    computed:{

     // count(){
     //    //alert(1);
     //    return this.$store.state.count+1
     //  },
      ...mapState([
        "count"
      ]),
      count(){
        //alert(1)
        // return this.count//一直执行
        return this.$store.getters.count//只执行一次
      },
      // ...mapGetters([
      //   "count"
      // ])
    },
    methods:{
      ...mapMutations([
          'jia',
          'jian'
      ]),
      ...mapActions([
        'jiaplus',
        'jianplus'
      ]),
      // ...mapActions({
      //          jiaplus:'jiaplus',
      //       jianplus:'jianplus'
      // })

    }

  }

</script>